<template>
  <div>
    <div class="bg-white p-3"
         v-if="isSp">
      <text class="mb-2">认证类型选择</text>
      <wxc-grid-select :single="true"
                       :cols="3"
                       :customStyles="customStyles"
                       :list="authType"
                       @select="onSelect">
      </wxc-grid-select>
    </div>

    <div class="flex-row p-3">
      <text>认证图片</text>
      <text class="small text-muted">(请上传清晰可见的照片)</text>
    </div>

    <div class="flex-row">
      <div v-for="(img, index) in params.authorizedImages"
           :key="index">
        <image class="cert-img"
               :src="img"
               @click="imagePreview(index)"></image>

        <text class="icon delete-btn"
              @click="deleteImage(index)">&#xe69e;</text>
      </div>

      <text class="icon add-icon"
            v-if="imagesLen < 9"
            @click="pick">&#xe69f;</text>
    </div>

    <vm-button class="mt-3"
               text="提交"
               @buttonClicked="submit"></vm-button>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import { WxcGridSelect } from 'weex-ui'
import {
  STORAGE_FARM,
  STORAGE_USER
} from '../../plugins/constant'
import {
  enumCertificate
} from '../../plugins/enumFarm'

export default {
  components: { VmButton, WxcGridSelect },
  props: {},
  data() {
    return {
      params: {
        authorizedName: '',
        authorizedImages: [],
        farmId: '',
        authorizedType: '',
        userId: ''
      },
      customStyles: {
        lineSpacing: '14px',
        width: '220px',
        height: '60px',
        icon: '',
        color: '#333333',
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#adb5bd',
        checkedBorderColor: '#fa9600',
        backgroundColor: '#ffffff',
        checkedBackgroundColor: '#fa9600'
      },
      authType: [
        { title: '无公害农产品', checked: true },
        { title: '绿色食品' },
        { title: '有机农产品' },
        { title: '农产品地理标志' }
      ]
    }
  },
  computed: {
    imagesLen() {
      return this.params.authorizedImages.length
    },
    isSp() {
      return [4, 5, 6, 7].includes(this.params.authorizedType)
    }
  },
  watch: {},
  created() {
    this.getParams()
  },
  methods: {
    getParams() {
      this.$router.getParams().then(res => {
        this.getFarm()
        if (!res) { return }
        this.params.authorizedType = res.type || 4
        this.params.authorizedName = enumCertificate[this.params.authorizedType] || '其他荣誉'
      })
    },
    getFarm() {
      // const farm = this.$storage.getSync(STORAGE_FARM) || {}
      const user = this.$storage.getSync(STORAGE_USER) || {}
      this.params.farmId = user.defaultClientId
      this.params.userId = user.userId
    },
    onSelect({ selectIndex }) {
      this.params.authorizedType = selectIndex + 4
    },
    pick() {
      if (this.imagesLen >= 9) { return }
      this.$picture.pick({
        maxCount: 9 - this.imagesLen
      }).then(res => {
        this.params.authorizedImages = res
      }).catch(err => {
        this.$notice.toast({ message: '选择图片失败，请重试！' })
      })
    },
    imagePreview(index) {
      this.$image.preview({ index, images: this.params.authorizedImages })
    },
    deleteImage(index) {
      this.params.authorizedImages.splice(index, 1)
    },
    submit() {
      if (!this.imagesLen) {
        return this.$notice.toast({ message: '请上传认证图片' })
      }
      this.$oss.uploadImage({
        files: this.params.authorizedImages
      }).then(res => {
        this.putAuth(res)
      }).catch(err => {
        this.$notice.toast({ message: '上传图片失败，请重试！' })
      })
    },
    putAuth(images) {
      const data = { ...this.params }
      data.authorizedName = enumCertificate[this.params.authorizedType] || '其他荣誉'
      data.authorizedImages = images ? `["${images.join('","')}"]` : ''
      this.$http({
        method: 'PUT',
        name: 'industrial.authorized.post',
        data,
        errorMsg: '认证失败，请重试'
      }).then(res => {
        this.$notice.toast({ message: '认证成功' })
        this.$router.setBackParams({ type: 3 })
        this.$router.back()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.flex-row {
  width: 750px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.small {
  font-size: 26px;
}
.text-muted {
  color: #999;
}
.bg-white {
  background-color: #fff;
}
.p-3 {
  padding: 30px;
}
.mt-3 {
  margin-top: 30px;
}
.mb-2 {
  margin-bottom: 20px;
}

.add-icon {
  width: 180px;
  height: 180px;
  text-align: center;
  line-height: 180px;
  font-size: 80px;
  background-color: $gray-300;
  color: $gray-600;
  margin-left: 30px;
  margin-bottom: 30px;
}
.cert-img {
  width: 180px;
  height: 180px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.delete-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-color: $border-color;
  border-radius: 30px;
  font-size: 36px;
  color: $accent-light;
}
</style>
